<!--
 * @Descripttion: 客户意向跟进详情
 * @version: 
 * @Author: lehaixia
 * @Date: 2023-04-20 15:36:03
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-07-17 16:57:44
-->
<template>
  <div>
    <qmp-tabs
      ref="qmpTabs"
      v-model:active="activeTab"
      lazy-render
      @click-tab="onClickTab"
      animated
      class="tab-nav-white"
    >
      <qmp-tab v-for="(tab, i) in tabs" :key="i" :title="tab.title" :name="tab.name">
        <div class="tab-content">
          <div v-if="activeTab === 'base'">
            <div class="user-info">
              <div class="left">
                {{ intendedCustomerInfo.customerName }}
                <span>{{ filterPhone(intendedCustomerInfo.customerPhone) }}</span>
              </div>
              <div class="right" @click.stop="onCallPhone(intendedCustomerInfo.customerPhone)">
                <img class="icon" src="@/assets/images/phone.png" />
              </div>
            </div>
            <div>
              <Cell title="身份证号" :modelValue="intendedCustomerInfo.customerIdcard" readonly />
              <Cell
                title="性别"
                :modelValue="intendedCustomerInfo.customerSex === 1 ? '男' : '女'"
                default-value=""
                readonly
              />
              <Cell title="年龄" :modelValue="intendedCustomerInfo.customerAge" default-value="" readonly />
              <Cell title="是否有店面" :modelValue="booleanMap(intendedCustomerInfo.isHaveShop)" readonly />
              <Cell title="已有店面面积" :modelValue="intendedCustomerInfo.shopArea" readonly />
              <Cell
                title="跟进方式"
                :modelValue="ctmFranchiseMarketInfo.followUpType"
                readonly
                dict-type-code="CTM_FOLLOW_UP_TYPE"
              />
              <Cell
                title="意向等级"
                :modelValue="intendedCustomerInfo.intendedLevel"
                readonly
                dict-type-code="CTM_INTENTION_LEVEL"
              />
              <Cell
                title="意向经营业务类型"
                :modelValue="intendedCustomerInfo.customerType"
                readonly
                dict-type-code="CTM_TOBE_CUSTOMER_TYPE"
              />
              <Cell title="意向加盟城市" :modelValue="intendedCustomerInfo.intendedCity" readonly />
              <Cell title="所属办事处" :modelValue="intendedCustomerInfo.agencyName" readonly />
              <Cell title="特别备注" :modelValue="intendedCustomerInfo.specialRemarks" readonly />
              <Cell
                title="客户来源"
                :modelValue="intendedCustomerInfo.customerSource"
                readonly
                dict-type-code="CTM_TOBE_CUSTOMER_DATA_FROM"
              />
              <Cell title="现经营品牌/行业资历" readonly custom>
                {{ intendedCustomerInfo.industryQualification }}
              </Cell>
              <Cell title="意向开店面积" :modelValue="intendedCustomerInfo.intendedShopArea" readonly />

              <Cell title="跟进说明" readonly custom> {{ intendedCustomerInfo.description }} </Cell>
              <Cell title="意向商家情况描述" readonly custom>
                {{ ctmFranchiseMarketInfo.intendedMerchantDescription }}
              </Cell>
              <Cell
                title="加盟状态"
                :modelValue="intendedCustomerInfo.joinStatus"
                readonly
                dict-type-code="CTM_JOIN_IN_STATE"
              />
              <Cell title="意向客户分配时间" :modelValue="intendedCustomerInfo.allotTime" readonly />
            </div>
          </div>
          <div v-if="activeTab === 'market'">
            <Cell title="特许经营市场" :modelValue="ctmFranchiseMarketInfo.marketName" readonly />
            <Cell title="市场地址" readonly custom>{{ address }}</Cell>
            <Cell title="城市级别" :modelValue="ctmFranchiseMarketInfo.cityLevel" dictTypeCode="CITY_LEVEL" readonly />
            <Cell
              title="市场属性"
              :modelValue="ctmFranchiseMarketInfo.marketNatrue"
              dictTypeCode="MARKET_NATURE"
              readonly
            />
            <Cell title="是否有场地" :modelValue="booleanMap(ctmFranchiseMarketInfo.isSite)" readonly />
            <Cell title="场地详细地址" readonly custom>
              {{ ctmFranchiseMarketInfo.address }}
            </Cell>
            <Cell
              title="是否缴纳意向保证金"
              :modelValue="booleanMap(ctmFranchiseMarketInfo.isPayEarmestMoney)"
              readonly
            />
            <Cell title="意向保证金缴纳时间" :modelValue="ctmFranchiseMarketInfo.payEarmestMoneyTime" readonly />
            <Cell title="意向加盟城市" :modelValue="intendedCustomerInfo.intendedCity" readonly />
            <Cell title="是否有遗留问题" :modelValue="booleanMap(ctmFranchiseMarketInfo.isLegacyProblem)" readonly />
            <Cell title="遗留问题说明" readonly custom>{{ ctmFranchiseMarketInfo.legacyProblemMsg }} </Cell>
          </div>

          <div v-if="activeTab === 'handover'">
            <Cell
              title="是否有需要办事处协助解决的问题"
              :modelValue="booleanMap(handoverInfo.isAgencyProblemHanding)"
              readonly
            />
            <Cell title="需要办事处协助解决的问题说明" readonly custom>
              {{ handoverInfo.agencyProblemHandingMsg }}
            </Cell>
            <Cell title="招商政策及前期的招商承诺" readonly custom>{{ handoverInfo.investmentCommitment }} </Cell>

            <Cell is-column custom title="市场信息附件" :right="false">
              <AttachmentUpload v-model="handoverInfo.files" readonly />
            </Cell>
            <!-- marketFiles -->
            <!--TODO-->
            <!-- <detail-item
              label="市场信息附件"
              :value="[
                { attachmentName: 'zzz.zip', url: 'xxxxx' },
                { attachmentName: 'file.png', url: 'xxxxx' }
              ]"
              :isAttachment="true"
            /> -->

            <Cell title="交接提报时间" :modelValue="handoverInfo.handoverPresentationTime" readonly />
            <Cell title="客源及市场确认时间" :modelValue="handoverInfo.marketConfirmTime" readonly />
            <Cell
              title="客户经理初步确认时间"
              :modelValue="handoverInfo.customerManagerInitialConfirmationTime"
              readonly
            />
            <Cell title="交接完成时间" :modelValue="handoverInfo.handoverCompleteTime" readonly />
            <Cell title="办事处负责人审批意见" readonly custom>{{ handoverInfo.agencyApprovalOpinion }} </Cell>
            <Cell title="招商项目负责人审批意见" readonly custom>{{ handoverInfo.investmentApprovalOpinion }} </Cell>
            <Cell title="客户经理账号" :modelValue="handoverInfo.customerManagerAccount" readonly />
            <Cell title="客户经理名称" :modelValue="handoverInfo.customerManagerName" readonly />
            <Cell title="客户经理初步确认情况" readonly custom>
              {{ handoverInfo.customerManagerInitialConfirmation }}
            </Cell>
            <Cell title="客户经理跟进结果确认" readonly custom>{{ handoverInfo.finalFollowUpResult }} </Cell>
            <Cell title="办事处协助解决问题回复" readonly custom>{{ handoverInfo.agencyReplyHandlingComments }} </Cell>
            <Cell title="BPM单号" :modelValue="handoverInfo.bpmNumber" readonly />
            <Cell title="BPM审核意见" :modelValue="handoverInfo.bpmAuditOpinion" readonly />
          </div>

          <div v-if="activeTab === 'progress'">
            <Cell title="客户编码" :modelValue="ctmMarketInfo.customerCode" readonly />
            <Cell title="客户名称" :modelValue="ctmMarketInfo.customerName" readonly />
            <Cell title="门店建设项目号" :modelValue="ctmMarketInfo.shopBuildNumber" readonly />
            <Cell
              title="门店建设整体进度"
              :modelValue="ctmMarketInfo.shopBuildStage"
              dict-type-code="BEFORE_CONST_SCHEDULE"
              readonly
            />
            <Cell title="是否已建档" :modelValue="booleanMap(ctmFranchiseMarketInfo.isFiling)" readonly />
            <Cell title="建档时间" :modelValue="ctmFranchiseMarketInfo.filingTime" readonly />
          </div>
        </div>
      </qmp-tab>
    </qmp-tabs>

    <div class="foot">
      <div class="btn" @click="toMarketChange"><img src="@/assets/images/mark-line.png" />市场变更记录</div>
      <div class="btn" @click="onStop" v-if="intendedCustomerInfo.joinStatus === 'A'">
        <img src="@/assets/images/power-line.png" />终止
      </div>
      <div class="btn" @click="toHandover" v-if="intendedCustomerInfo.joinStatus === 'A'">
        <img src="@/assets/images/switch.png" />交接
      </div>
      <div class="btn" @click="toEdit" v-if="intendedCustomerInfo.joinStatus === 'A'">
        <img src="@/assets/images/edit.png" />编辑
      </div>
    </div>

    <Termination
      v-if="showTermination"
      v-model:show="showTermination"
      title="意向客户跟进终止"
      :detailData="detail"
      @submit="onTermination"
    />
  </div>
</template>

<script lang="ts">
  // import DetailItem from '@/components/DetailItem/index.vue'
  import Termination from '../../potentialCustomer/components/Termination.vue'
  import { reactive, toRefs, computed, getCurrentInstance } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Cell from '@/components/Cell/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import { detailItem, terminateItem } from '@/apis/attractInvestment/potentialCustomerFollowUp'
  import { filterPhone, onCallPhone } from '@/utils'

  interface anyObjectModle {
    id: any
    activeTab: string
    tabs: any[]
    showTermination: boolean
    detail: any
    intendedCustomerInfo: any
    ctmMarketInfo: any
    ctmFranchiseMarketInfo: any
    handoverInfo: any
    [key: string]: any
  }
  export default {
    name: 'PotentialCustomerMarketChangeDetail',
    components: {
      //  DetailItem,
      Termination,
      Cell,
      AttachmentUpload
    },
    setup() {
      const $router = useRouter()
      const $route = useRoute()
      const { proxy }: any = getCurrentInstance()

      const datas = reactive<anyObjectModle>({
        id: $route.query.id || '',
        activeTab: 'base',
        tabs: [
          { title: '意向客户', name: 'base' },
          { title: '特许经营市场', name: 'market' },
          { title: '交接信息', name: 'handover' },
          { title: '市场建设进度', name: 'progress' }
        ],
        detail: {},
        showTermination: false,
        intendedCustomerInfo: {},
        ctmMarketInfo: {},
        ctmFranchiseMarketInfo: {},
        handoverInfo: {}
      })

      const onClickTab = (tabItem: Object) => {
        // 点击tab
        // console.log(tabItem)
      }

      // 市场变更记录
      const toMarketChange = () => {
        const { id, customerName, customerPhone } = datas.intendedCustomerInfo
        const { marketName } = datas.ctmFranchiseMarketInfo

        $router.push({
          name: 'PotentialCustomerMarketChange',
          query: {
            id: id // 意向客户ID
          },
          params: {
            customerName: customerName,
            customerPhone: customerPhone,
            marketName: marketName
          }
        })
      }

      // 终止
      const onStop = () => {
        datas.showTermination = true
      }

      const onTermination = (data: any) => {
        const postdata: any = {
          id: datas.id,
          terminateDescription: data.terminationCause
        }
        terminateItem(postdata)
          .then((res: any) => {
            if (res.success === 1) {
              proxy.$toast('终止成功')
              getDetail()
              proxy.$SimpleEvents.emit('refreshCustomerChangeItem')
            }
            datas.showTermination = false
          })
          .catch((e) => {
            if (e) proxy.$toast(e || '终止失败')
          })
      }

      // 客户意向编辑
      const toEdit = () => {
        $router.push({
          path: '/potentialCustomerFollowUp/edit',
          query: {
            id: datas.id
          }
        })
      }

      // 交接
      const toHandover = () => {
        $router.push({
          path: '/potentialCustomerFollowUp/handover',
          query: {
            id: datas.id,
            type: 'handover'
          }
        })
      }

      // 市场地址
      const address = computed(() => {
        const {
          provinceName = '',
          cityName = '',
          districtName = '',
          streetName = '',
          address = ''
        } = datas.ctmFranchiseMarketInfo

        return provinceName + cityName + districtName + streetName + address
      })

      const booleanMap = (val: number | string) => {
        const map: any = {
          1: '是',
          0: '否'
          // '02': '是',
          // '01': '否'
        }
        return map[val] || ''
      }

      const getDetail = () => {
        const id = `${datas.id}`
        detailItem(id).then((res: any) => {
          const { intendedCustomerDTO, ctmMarketDTO, ctmFranchiseMarketDTO, ctmMarketBuildFollowUpResultDTO }: any =
            res.data
          datas.detail = res.data

          datas.intendedCustomerInfo = intendedCustomerDTO // 意向客户
          datas.ctmFranchiseMarketInfo = ctmFranchiseMarketDTO // 特许经营市场
          datas.ctmMarketInfo = ctmMarketDTO // 市场建设进度
          datas.handoverInfo = ctmMarketBuildFollowUpResultDTO // 交接信息
        })
      }
      getDetail()

      return {
        ...toRefs(datas),
        onClickTab,
        onStop,
        toEdit,
        toMarketChange,
        toHandover,
        onTermination,
        address,
        filterPhone,
        onCallPhone,
        booleanMap
      }
    }
  }
</script>

<style lang="less" scoped>
  .tab-content {
    margin: 8px 0 78px;
  }
  .user-info {
    margin-bottom: 8px;
    background: var(--bg-global-weaker);
    padding: 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      flex: 1;
      margin-right: 8px;
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);

      span {
        margin-left: 6px;
        font: var(--font-main-title-body);
        color: var(--texticon-default-stronger);
      }
    }

    .right {
      width: 40px;
      height: 40px;
      background: var(--texticon-color-brand-normal);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 24px;
        height: 24px;
      }
    }
  }

  .foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    padding: 12px 0px;
    z-index: 9;
    box-sizing: border-box;
    background: var(--bg-global-weaker);
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      font: var(--font-point);
      color: var(--texticon-default-strong);

      img {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
      }
    }
  }
</style>
